<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .td {
            text-align: center;
        }

        .ok {
            background-color: lightgreen;
        }

        .warning {
            background-color: yellow;
        }

        .error {
            background-color: red;
        }
    </style>

    <script src="/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <div style="width: 49%;float: left">
        <div style="width:100%;background-color: #b3d8ff;line-height: 30px;text-align: center">服务注册列表</div>
        <table border="0" style=" width:100%;background-color: blanchedalmond;" cellspacing="0">
            <tr style="width: 100%;">
                <th width="25%">服务名称</th>
                <th width="10%">状态</th>
                <th width="20%">ip</th>
                <th width="10%">port</th>
                <th width="35%">url</th>
            </tr>
            <tr style="width: 100%;" v-for="service in serviceList"
                :class="service.status=='OK'?'ok':service.status=='error'?'error':'warning'">
                <td class="td" width="25%">{{service.name}}</td>
                <td class="td" width="10%">{{service.status}}</td>
                <td class="td" width="20%">{{service.ip}}</td>
                <td class="td" width="10%">{{service.port}}</td>
                <td class="td" width="35%">{{service.url}}</td>
            </tr>
        </table>
    </div>
    <div style="width: 49%;float: right">
        <div style="width:100%;background-color: #b3d8ff;line-height: 30px;text-align: center">注册中心集群列表</div>
        <table style=" width:100%;background-color: blanchedalmond" cellspacing="0">
            <tr style="width: 100%">
                <th width="25%">应用名称</th>
                <th width="10%">状态</th>
                <th width="20%">ip</th>
                <th width="10%">port</th>
                <th width="35%">url</th>
            </tr>
            <tr style="width: 100%;" v-for="server in serverList"
                :class="server.status=='OK'?'ok':server.status=='ERROR'?'error':'warning'">
                <td class="td" width="25%">{{server.name}}</td>
                <td class="td" width="10%">{{server.status}}</td>
                <td class="td" width="20%">{{server.ip}}</td>
                <td class="td" width="10%">{{server.port}}</td>
                <td class="td" width="35%">{{server.url}}</td>
            </tr>
        </table>
    </div>
</div>
<script src="/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            serviceList: [
                {name: "app", status: "OK", ip: "192.168.145.133", port: "8080", url: "http://192.168.145.133:8080/"}
            ],
            serverList: [
                {name: "app", status: "ERROR", ip: "192.168.145.133", port: "8080", url: "http://192.168.145.133:8080/"}
            ]
        },
        created() {
            //获取集群服务
            axios.get("/manager/servers").then((resp) => {
                this.serverList = resp.data;
            });
            //获取注册服务
            axios.get("/manager/services").then((resp) => {
                this.serviceList = resp.data;
            })
        }
    });
</script>
</body>
</html>